<template>
  <yd-ls-box>
    <yd-ls-layout title="预约详情" :onfoot=false :tolfurl="urls" >
      <div class="yd-ls-height"></div>
      <div class="yd-ls-waming" v-if="status==4 || status==5 || subscribeDetail.is_auto_close">
        {{ subscribeDetail.close_remark }}
      </div>
      <yd-list theme="4" class="yd-ls-subscribedetail-list">
        <yd-list-item >
          <img slot="img" :src="subscribeDetail.head || defalut_img">
          <span slot="title">
                <span>{{ subscribeDetail.doctor_name }}</span>
                <span>{{ subscribeDetail.pay_remark }}</span>
              </span>
          <yd-list-other slot="other">
            <div>
              <p class="list-price">{{ subscribeDetail.cust_name }} <i v-if="subscribeDetail.title">|</i> {{ subscribeDetail.title }}</p>
            </div>
          </yd-list-other>
        </yd-list-item>
      </yd-list>

      <yd-cell-group class="yd-ls-subscribedetail-cell">
        <yd-cell-item>
          <span slot="left">申请时间</span>
          <span slot="right">{{ subscribeDetail.createtime }}</span>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">{{(status==0 || status==3)?"期望预约时间":"咨询时间"}}</span>
          <span slot="right">{{ subscribeDetail.pre_time }}</span>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">咨询方式</span>
          <span slot="right">{{ subscribeDetail.visit_type==2 ? '电话咨询' : '线下咨询' }}</span>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">联系电话</span>
          <span slot="right">{{ subscribeDetail.contact_tel }}</span>
        </yd-cell-item>
      </yd-cell-group>

      <yd-ls-title lftit="病情描述" rgtit=""></yd-ls-title>
      <yd-ls-content>
        <span slot="content">
          {{ subscribeDetail.disease_des }}
          <yd-lightbox :num="imgLen">
            <yd-grids-group class="yd-ls-subscribe-grids" :rows="3">
              <yd-grids-item v-for="(items, index) in subscribeDetail.files" :key="index">
                <yd-lightbox-img  slot="icon" :src="items"></yd-lightbox-img>
              </yd-grids-item>
            </yd-grids-group>
          </yd-lightbox>
        </span>
      </yd-ls-content>

      <div>
        <yd-ls-title lftit="温馨提示"></yd-ls-title>
        <yd-ls-content>
          <span slot="content">
            <ul>
              <li>1、提交申请不用付款，仅作为向医生发起预约请求。</li>
              <li>2、申请通过或失败后会在{{comName}}公众号上通知，请留意信息。</li>
              <li v-if="subscribeDetail.visit_type==3">3、具体线下面诊地点需与医生确认后再通过公众号或短信通知。</li>
            </ul>
          </span>
        </yd-ls-content>
      </div>
    </yd-ls-layout>
    <yd-ls-flex-button>

      <yd-flexbox v-if="status==0 || status==2 || status==3">
        <yd-flexbox-item v-if="status==0">
          <i>{{'客服审核中' }}</i>
        </yd-flexbox-item>
        <yd-flexbox-item v-if="status==3">
          <i>{{ '预约不通过' }}</i>
          <small style="display:block; color:#ef4f4f;padding-top:2px;">{{subscribeDetail.close_time}}</small>
        </yd-flexbox-item>
        <yd-flexbox-item v-if="status==2 && subscribeDetail.visit_type==2">
          <p>付款成功，待医生联系</p>
        </yd-flexbox-item>
        <yd-flexbox-item v-if="status==2 && subscribeDetail.visit_type==3">
          <p>付款成功</p>
          <p>预约地点：{{ subscribeDetail.location }}</p>
        </yd-flexbox-item>
        <yd-button v-if="status!=3" type="warning" @click.native="call">联系客服</yd-button>
        <yd-button v-if="status==3" type="danger" @click.native="onReason">查看原因</yd-button>
      </yd-flexbox>
      <!-- 查看原因 -->
      <yd-popup v-model="showReason" position="bottom" height="20%">
        <div class="yd-ls-subscribedetail-reason">{{ subscribeDetail.close_remark }}</div>
      </yd-popup>

      <!-- 弹出电话 -->
      <yd-actionsheet :items="callitem" v-model="showcall" cancel="取消"></yd-actionsheet>

      <yd-flexbox v-if="status==1 || status==4 || status==5">
        <yd-flexbox-item v-if="status==1">
          <p>总价：{{ subscribeDetail.pay_money }}元</p>
          <p v-if="subscribeDetail.visit_type==2">通话10分钟</p>
          <p v-else>预约地点：{{ subscribeDetail.location }}</p>
        </yd-flexbox-item>
        <yd-flexbox-item v-if="status==4">
          <p>本次咨询已结束</p>
          <span>请为医生服务打个分吧</span>
        </yd-flexbox-item>
        <yd-flexbox-item v-if="status==5">
          <p>本次咨询已结束</p>
        </yd-flexbox-item>
        <yd-button style="width: 72px;" v-if="status==1" type="primary" @click.native="goPay(subscribeDetail.pay_money, subscribeDetail.drid, subscribeDetail.id, subscribeDetail.mid)">去付款</yd-button>
        <yd-button style="width: 74px;" v-if="status==4" type="primary" @click.native="evalDot(subscribeDetail.drid,subscribeDetail.id)">评价医生</yd-button>
        <yd-button style="width: 72px;" v-if="status==5" type="primary" @click.native="evalDot(subscribeDetail.drid,subscribeDetail.id)">已评价</yd-button>
        <yd-button v-if="status==1" type="warning" @click.native="call">联系客服</yd-button>
        <yd-button v-if="(status!=1 && !subscribeDetail.is_auto_close && subscribeDetail.medical_id)" type="warning" @click.native="checkCase(subscribeDetail.medical_id)">查看病历</yd-button>
      </yd-flexbox> 
    </yd-ls-flex-button>
  </yd-ls-box>
</template>

<script>
  import ydLsBox from '../../components/yd-ls-box.vue'
  import ydLsLayout from '../../components/yd-ls-layout.vue'
  import ydLsTitle from '../../components/yd-ls-title.vue'
  import ydLsFlexButton from '../../components/yd-ls-flexbutton.vue'
  import ydLsContent from '../../components/yd-ls-content.vue'
  import api from '../../axios/api'

  export default {
    name: 'subscribeDetail',
    data() {
      return {
        urls: 'index.html#/subscribe?type=1',
        comName: api.default_title,
        status: '',
        subscribeDetail: [],
        list:[],
        imgLen: '',
        showcall: false,
        showReason: false,
        callitem: [
          {
            label: api.default_phone_info,
            stay: true /* 不关闭 */
          },
          {
            label: api.default_phone,
            callback: () => {
              window.location.href = `tel:${api.default_phone.replace(/-/g,'')}`
            }
          }
        ],
        defalut_img: api.default_img_dot // 医生缺省头像
      }
    },
    created() {
      //history.pushState(null,null,"subscribedetail.html")
      //TODO: 从公众号进时，检查openid
      if(this.$route.query.openid){
        localStorage.openId = this.$route.query.openid
        setTimeout(()=>{
          this.getSubscribe(this.$route.query.id)
        }, 800)
      }else {
        //TODO:初始化数据
        this.getSubscribe()
      }

      //强制刷新
      // location.href=document.referrer
    },
    methods: {
      init() {

      },
      goPay(total_fee, drid, msg_v_id, patient_id) {
        let payinfo = {
          type: 1,
          openid: localStorage.openId,
          total_fee: total_fee,
          drid: drid,
          msg_visit_id: msg_v_id,
          orderid: msg_v_id,
          patientid: patient_id
        }
        this.axios.get('http://nkwx.6ewei.com/pay/payinfo.aspx', {
          params: {
            openid: localStorage.openId,
            payinfo: payinfo
          }
        })
        .then(m=>{
          window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx75d21642db594aca&redirect_uri=http%3A%2F%2Fhtpay.6ewei.com%2Findex.html&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
        })
        .catch(err=>{
          this.$dialog.loading.close()  
          this.$dialog.alert({ mes: 'payinfo=网络出错' })
        })
      },
      getSubscribe(zxid) {
        this.$dialog.loading.open(api.default_loading_txt);
        let id = sessionStorage.getSubscribeId || zxid
        this.axios.get(api.subscribe_detail, {params:{id: id}})
          .then(m=>{
            let subscribe_detail_data = m.data
            this.subscribeDetail = subscribe_detail_data.data
            this.status = this.subscribeDetail.status
            this.imgLen = this.subscribeDetail.files.length
            if(this.subscribeDetail.visit_type == 2){
              sessionStorage.isTab = 0
            }else {
              sessionStorage.isTab = 1
            }
            this.$dialog.loading.close()
          }).catch(err=>{
            this.$dialog.loading.close()
            this.$dialog.alert({mes: JSON.stringify(err)})
          })
      },
      call () {
        this.showcall = true
      },
      onReason() {
        this.showReason = true
      },
      evalDot (drid, rid) {
        window.location = `index.html#/evals?type=2&drid=${drid}&rid=${rid}`
      },
      checkCase(medical_id) {
        window.location = `index.html#/billcase?cid=${medical_id}&type=subscribedetail`
      },
    },
    mounted() {
    },
    components: { ydLsBox, ydLsLayout, ydLsTitle, ydLsFlexButton, ydLsContent }


  }
</script>


<style>
  .yd-ls-subscribedetail-reason {
    padding: 10px;
    font-size: .3rem;
  }
  .yd-ls-flex-button .yd-flexbox-item-center i,
  .yd-ls-flex-button .yd-flexbox-item-center p:nth-child(1) {
    font-size: .3rem;
    line-height: .3rem;
  }
  .yd-ls-flex-button .yd-flexbox-item-center p {
    width: 100%;
    height: 18px;
    overflow: hidden;
    text-align: center;
  }
  .yd-ls-subscribedetail-cell .yd-cell {
    z-index: 0;
  }
  .yd-ls-subscribedetail-cell {
    margin-top: .15rem;
    margin-bottom: 0;
  }
  .yd-ls-subscribedetail-cell .yd-cell-left {
    font-weight: 500;
  }

  .yd-ls-subscribe-grids .yd-grids-item:after {
    border-bottom: 0;
  }
  .yd-ls-subscribe-grids  .yd-grids-icon {
    height: 2.1rem;
  }
  .yd-ls-subscribe-grids .yd-grids-item {
    padding: 0;
  }


  .yd-ls-subscribedetail-list.yd-list {
    padding: 0;
  }
  .yd-ls-subscribedetail-list.yd-list .yd-list-item {
    padding: 0.2rem 0.3rem;
    line-height: initial;
  }
  .yd-ls-subscribedetail-list.yd-list .yd-list-item .yd-list-img img {
    height: 1.2rem;
  }
  .yd-ls-subscribedetail-list.yd-list .yd-list-item .yd-list-img {
    width: 1.2rem;
    padding: 0.6rem 0;
    border-radius: 50%;
    margin-right: 0.2rem;
  }
  .yd-ls-subscribedetail-list.yd-list .yd-list-item .yd-list-mes .yd-list-other {
    padding-top: 0;
  }
  .yd-ls-subscribedetail-list.yd-list .yd-list-item .yd-list-title {
    padding-bottom: .1rem
  }
  .yd-ls-subscribedetail-list.yd-list .yd-list-item .yd-list-title span span:last-child{
    float: right;
    font-size: 12px;
    color: #919191;
    font-weight: normal;
  }
  .yd-ls-subscribedetail-list.yd-list .yd-list-item .yd-list-other p {
    padding-bottom: .05rem
  }
  .yd-ls-subscribedetail-list.yd-list .yd-list-item .yd-list-other .yd-ls-subscribe-address{
    width: 4rem;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
  }

  .yd-ls-subscribedetail-list.yd-list .yd-list-item .yd-list-mes {
    margin-top: 12px;
  }
  .yd-ls-subscribedetail-list.yd-list .yd-list-item .yd-list-mes .yd-list-title {
    font-size: .28rem;
  }

</style>
